/* eslint-disable no-unused-expressions */
<template>
  <div>
    <!-- 学生管理 -->
    <!-- 按钮上面的导航 -->
    <!-- <el-row style="margin: 18px 0px 0px 18px "> -->
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>学生管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <!-- 搜索与添加按钮 -->
    <div style="margin-top: 15px; margin-left: 12px;">
       <!-- <el-select v-model="queryKey1" style="width: 150px;float:left;"  slot="prepend" placeholder="请选择启用状态">
          <el-option label="" value=""></el-option>
          <el-option label="启用状态" value="1"></el-option>
           <el-option label="禁用状态" value="0"></el-option>
        </el-select> -->
      <el-input
        style="width: 250px;float:left;"
        placeholder="请输入学号"
        suffix-icon="el-icon-date"
        v-model="queryKey2"
        clearable
      ></el-input>
      <el-input
        placeholder="请输入姓名"
        v-model="queryKey3"
        style="width: 250px;float:left;"
        clearable
      >
        <!-- <el-button slot="append" icon="el-icon-search" @click="findByQueryKey()"></el-button> -->
      </el-input>
      <!-- <el-button type="success" style="float: right;margin-right: 20px" icon="el-icon-refresh" @click="loadBanners1()" circle></el-button> -->
    <el-button style="float:left;" type="primary" @click="findByQueryKey()" icon="el-icon-search">搜索</el-button>
    <el-button style="float:left;" type="primary" icon="el-icon-refresh" @click="load()" >刷新</el-button>
    </div>

    <!-- 引入的添加/修改组件  组件名叫BannerCreate  就用 banner-creat -->
    <stu-add  @onSubmit="add()" ref="edit"></stu-add>

    <el-card style="margin: 15px 1%;width: 98%">
      <el-table :data="student" border style="width: 100%" :max-height="tableHeight">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="id" width="55" label="id"></el-table-column>
        <el-table-column prop="username" label="登录名" fit></el-table-column>
        <el-table-column prop="stuNo" label="学号" fit></el-table-column>
        <el-table-column prop="stuName" label="姓名" fit></el-table-column>
        <el-table-column prop="phone" width="110" label="电话" sortable fit></el-table-column>
        <el-table-column prop="email" label="邮箱" fit></el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          sortable
          width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.sex === 0">
              <el-tag type="danger">女</el-tag>
            </div>
            <div v-if="scope.row.sex === 1">
              <el-tag type="success">男</el-tag>
            </div>
          </template>
        </el-table-column>
         <el-table-column prop="address" label="地址" fit></el-table-column>
        <el-table-column prop="createTime" width="100" label="入学时间"></el-table-column>
        <el-table-column label="照片" fit>
          <template slot-scope="scope">
            <el-image style="width: 120px; height: 100px" :src="scope.row.imageUrl" :fit="fit"></el-image>
          </template>
        </el-table-column>
        <!-- <el-table-column label="启用" sortable width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enabled"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="(value) => commitStatusChange(value, scope.row)"
            ></el-switch>
          </template>
        </el-table-column> -->

        <el-table-column fixed="right" label="操作"  width="120">
          <template slot-scope="scope">
            <el-button
              @click="editThis(scope.row)"
              type="primary"
              size="small"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              @click="deleteThis(scope.row.id)"
              type="danger"
              size="small"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 20px 0 50px 0">
        <el-pagination
          background
          style="float:right;"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import StuAdd from './StuAdd'
export default {
  name: 'Student',
  // 引入之后 使用 banner-create 进行使用
  components: { StuAdd },
  data () {
    return {
      student: [],
      queryKey1: '',
      queryKey2: '',
      queryKey3: '',
      pageSize: 10,
      total: 0
    }
  },
  mounted () {
    // 刷新清空搜索框的值
    // eslint-disable-next-line no-unused-expressions
    this.queryKey1 = ''
    this.queryKey2 = ''
    this.queryKey3 = ''
    this.loadThis()
  },
  computed: {
    tableHeight () {
      // table  card的高度
      return window.innerHeight - 300
    }
  },
  methods: {
    load () {
      this.loadThis()
    },
    loadThis () {
      var _this = this
      this.$axios.post('/admin/student/' + this.pageSize + '/1').then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.student = resp.data.result.content
          _this.total = resp.data.result.totalElements
           this.$message({
              type: 'success',
              message: '刷新成功'
            })
        } else {
          // 从后端返回错误信息
            this.$alert('<p style=" color:#F00;">' + resp.data.message + '</p>', '错误提示', {
              dangerouslyUseHTMLString: true
            })
        }
      })
    },
    handleCurrentChange (page) {
      var _this = this
      this.$axios.post('/admin/student/' + this.pageSize + '/' + page).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.student = resp.data.result.content
          _this.total = resp.data.result.totalElements
        } else {
              // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
              type: 'error',
              dangerouslyUseHTMLString: true
              })
        }
      })
    },
    commitStatusChange (value, student) {
      this.$axios
        .put('/admin/student/status', {
          enabled: value,
          id: student.id
        })
        .then((resp) => {
          if (resp && resp.data.code === 200) {
            if (value) {
              this.$message('已启用 ')
            } else {
              this.$message('已禁用 ')
            }
          } else {
            student.enabled = true
             // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
              type: 'error',
              dangerouslyUseHTMLString: true
              })
          }
        })
    },
    editThis (item) {
      this.$refs.edit.dialogFormVisible = true
      this.$refs.edit.form = {
        id: item.id,
        username: item.username,
        stuNo: item.stuNo,
        stuName: item.stuName,
        phone: item.phone,
        email: item.email,
        sex: item.sex,
        address: item.address,
        createTime: item.createTime,
        imageUrl: item.imageUrl
      }
    },
    deleteThis (id) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$axios.delete('/admin/student/' + id).then((resp) => {
            if (resp && resp.data.code === 200) {
              this.$message({
                message: resp.data.message,
                type: 'success'
              })
              this.loadThis()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
     findByQueryKey () { // 根据关键字查询
          var _this = this
          this.$axios.post('/admin/student/findByQueryKey?queryKey1=' + this.queryKey1 + '&queryKey2=' + this.queryKey2 + '&queryKey3=' + this.queryKey3).then(resp => {
            if (resp && resp.data.code === 200) {
              _this.student = resp.data.result
              // 从后端返回信息
              this.$alert(resp.data.message, '提示', {
                type: 'success',
                dangerouslyUseHTMLString: true
              })
            } else {
               // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
              type: 'error',
              dangerouslyUseHTMLString: true
              })
            }
          })
        }
  }
}
</script>

<style scoped>
.add-link {
  margin: 18px 0 15px 10px;
  float: left;
}
</style>
